<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://file.iviewui.com/1.0.1/styles/iview.css">
  <link rel="stylesheet" type="text/css" href="https://file.iviewui.com/dist/main.e30070c41334de1c3319.css">
</head>
<body>
<div id="app">
  <template>
    <div style="margin: 10px">
      显示边框
      <switch :checked.sync="showBorder" @on-change="change" style="margin-right: 5px"></switch>
      显示斑马纹
      <switch :checked.sync="showStripe" style="margin-right: 5px"></switch>
      显示索引
      <switch :checked.sync="showIndex" style="margin-right: 5px"></switch>
      显示多选框
      <switch :checked.sync="showCheckbox" style="margin-right: 5px"></switch>
      显示表头
      <switch :checked.sync="showHeader" style="margin-right: 5px"></switch>
      表格滚动
      <switch :checked.sync="fixedHeader" style="margin-right: 5px"></switch>
      <br>
      <br>
      表格尺寸
      <radio-group :model.sync="tableSize" type="button">
        <radio value="large">大</radio>
        <radio value="default">中</radio>
        <radio value="small">小</radio>
      </radio-group>
    </div>
    <i-table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''"
             :size="tableSize" :data="tableData3" :columns="tableColumns3"></i-table>
  </template>

</div>
<script type="text/javascript" src="//cdn.bootcss.com/vue/2.2.4/vue.min.js"></script><!-- vue 2.x系列最新版本的支持 -->
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<script>
  var Main = {
    data () {
      return {
        tableData3: [
          {
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居',
            date: '2016-10-03'
          },
          {
            name: '张小刚',
            age: 24,
            address: '北京市海淀区西二旗',
            date: '2016-10-01'
          },
          {
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道',
            date: '2016-10-02'
          },
          {
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道',
            date: '2016-10-04'
          },
          {
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居',
            date: '2016-10-03'
          },
          {
            name: '张小刚',
            age: 24,
            address: '北京市海淀区西二旗',
            date: '2016-10-01'
          },
          {
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道',
            date: '2016-10-02'
          },
          {
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道',
            date: '2016-10-04'
          }
        ],
        showBorder: true,
        showStripe: true,
        showHeader: true,
        showIndex: true,
        showCheckbox: true,
        fixedHeader: true,
        tableSize: 'default'
      }
    },
    methods: {
      change (status) {
        this.$Message.info('开关状态：' + status);
      }
    },
    computed: {
      tableColumns3 () {
        let columns = [];
        if (this.showCheckbox) {
          columns.push({
            type: 'selection',
            width: 60,
            align: 'center'
          })
        }
        if (this.showIndex) {
          columns.push({
            type: 'index',
            width: 60,
            align: 'center'
          })
        }
        columns.push({
          title: '日期',
          key: 'date',
          sortable: true
        });
        columns.push({
          title: '姓名',
          key: 'name'
        });
        columns.push({
          title: '年龄',
          key: 'age',
          sortable: true,
          filters: [
            {
              label: '大于25岁',
              value: 1
            },
            {
              label: '小于25岁',
              value: 2
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.age > 25;
            } else if (value === 2) {
              return row.age < 25;
            }
          }
        });
        columns.push({
          title: '地址',
          key: 'address',
          filters: [
            {
              label: '北京',
              value: '北京'
            },
            {
              label: '上海',
              value: '上海'
            },
            {
              label: '深圳',
              value: '深圳'
            }
          ],
          filterMethod (value, row) {
            return row.address.indexOf(value) > -1;
          }
        });
        return columns;
      }
    }
  }
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app')
</script>
</body>
</html>
